<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <title>Graph Editor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="mxgraph/examples/grapheditor/www/styles/grapheditor.css">
	<script type="text/javascript">
		// Public global variables
		var MAX_REQUEST_SIZE = 10485760;
		var MAX_WIDTH = 6000;
		var MAX_HEIGHT = 6000;
	
		// URLs for save and export
		var EXPORT_URL = '/export';
		var SAVE_URL = '/save';
		var OPEN_URL = '/';
		var RESOURCES_PATH = 'mxgraph/examples/grapheditor/www/resources';
		var RESOURCE_BASE = RESOURCES_PATH + '/grapheditor';
		var STENCIL_PATH = 'mxgraph/examples/grapheditor/www/stencils';
		var IMAGE_PATH = 'mxgraph/examples/grapheditor/www/images';
		var STYLE_PATH = 'mxgraph/examples/grapheditor/www/styles';
		var CSS_PATH = 'mxgraph/examples/grapheditor/www/styles';
		var OPEN_FORM = 'mxgraph/examples/grapheditor/www/open.html';
	
		// Specifies connection mode for touch devices (at least one should be true)
		var tapAndHoldStartsConnection = true;
		var showConnectorImg = true;

		// Parses URL parameters. Supported parameters are:
		// - lang=xy: Specifies the language of the user interface.
		// - touch=1: Enables a touch-style user interface.
		// - storage=local: Enables HTML5 local storage.
		var urlParams = (function(url)
		{
			var result = new Object();
			var idx = url.lastIndexOf('?');
	
			if (idx > 0)
			{
				var params = url.substring(idx + 1).split('&');
				
				for (var i = 0; i < params.length; i++)
				{
					idx = params[i].indexOf('=');
					
					if (idx > 0)
					{
						result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
					}
				}
			}
			
			return result;
		})(window.location.href);

		// Sets the base path, the UI language via URL param and configures the
		// supported languages to avoid 404s. The loading of all core language
		// resources is disabled as all required resources are in grapheditor.
		// properties. Note that in this example the loading of two resource
		// files (the special bundle and the default bundle) is disabled to
		// save a GET request. This requires that all resources be present in
		// each properties file since only one file is loaded.
		mxLoadResources = false;
		mxBasePath = 'mxgraph/src';
		mxLanguage = urlParams['lang'];
		mxLanguages = ['de'];
	</script>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/jscolor/jscolor.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/sanitizer/sanitizer.min.js"></script>
	<script type="text/javascript" src="mxgraph/src/js/mxClient.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/EditorUi.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Editor.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Sidebar.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Format.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Graph.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Shapes.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Actions.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Menus.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Toolbar.js"></script>
	<script type="text/javascript" src="mxgraph/examples/grapheditor/www/js/Dialogs.js"></script>
	<style>
	.expand{
	background-image:url(mxgraph/examples/images/add.png);
	height:20px;
	width:20px;
	float:right;
	cursor:pointer;
	}
	</style>
</head>
<body class="geEditor">
	<script type="text/javascript">
		// Extends EditorUi to update I/O action states
		var graph = null ;
		$(document.body).bind("click",function(evt){
			var name = evt.target.className;
			if(name == "expand"){
				graph.foldCells(false);
				return false;
			}
		});
		var xmlcon = '<mxGraphModel grid="1" guides="1" tooltips="1" connect="1" fold="1" page="0" pageScale="1.5" pageWidth="826" pageHeight="1169"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="&lt;table cellpadding=&quot;5&quot; style=&quot;font-size:9pt;border:none;border-collapse:collapse;width:100%;&quot;&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot; style=&quot;border:1px solid gray;background:#e4e4e4;&quot;&gt;Tablename&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;" style="verticalAlign=top;align=left;overflow=fill;html=1" vertex="1" parent="1"><mxGeometry x="440" y="130" width="180" height="99" as="geometry"/></mxCell></root></mxGraphModel>';
		(function()
		{
			var editorUiInit = EditorUi.prototype.init;
			
			EditorUi.prototype.init = function()
			{
				editorUiInit.apply(this, arguments);
				this.actions.get('export').setEnabled(false);

				// Updates action states which require a backend
				if (!useLocalStorage)
				{
					mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
					{
						var enabled = req.getStatus() != 404;
						this.actions.get('open').setEnabled(enabled || fileSupport);
						this.actions.get('import').setEnabled(enabled || fileSupport);
						this.actions.get('save').setEnabled(enabled);
						this.actions.get('saveAs').setEnabled(enabled);
						this.actions.get('export').setEnabled(enabled);
					}));
				}
			};
		})();
	
		String.prototype.replaceAll = function(regex, target) {
			return this.replace(new RegExp(regex, "gm"), target);
		};
		var editior4ui = new EditorUi(new Editor());
		
	  	 graph = editior4ui.editor.graph;
		$.ajax({
		  type: "post",
		  url: "book.do",
		  data: "action=mxg",
	   success: function(msg){
	  	 debugger;
	  	 var doc = mxUtils.parseXml(msg);
	  	 editior4ui.editor.setGraphXml(doc.documentElement);
	  	 graph.selectEdges();//选中所有的线  
	  	 graph.orderCells(true);//使线在所有元素的底下   
	  	 graph.clearSelection();//清除所有选择
	   }
		});
		var style = new Object();
		style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
		style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
		style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
		style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
		style[mxConstants.STYLE_FONTCOLOR] = '#000000';
		style[mxConstants.STYLE_FONTSIZE] = '11';
		style[mxConstants.STYLE_FONTSTYLE] = 0;
		style[mxConstants.STYLE_SPACING_LEFT] = '4';
		style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
		style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
		graph.getStylesheet().putDefaultVertexStyle(style);
	  style = new Object();
		style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
		style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
		style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
		style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
		style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
		style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
		style[mxConstants.STYLE_SWIMLANE_FILLCOLOR] = '#ffffff';
		style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
		style[mxConstants.STYLE_FONTCOLOR] = '#000000';
		style[mxConstants.STYLE_STROKEWIDTH] = '2';
		style[mxConstants.STYLE_STARTSIZE] = '28';
		style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
		style[mxConstants.STYLE_FONTSIZE] = '12';
		style[mxConstants.STYLE_FONTSTYLE] = 1;
		style[mxConstants.STYLE_IMAGE] = 'mxgraph/examples/images/icons48/table.png';
		// Looks better without opacity if shadow is enabled
		//style[mxConstants.STYLE_OPACITY] = '80';
		style[mxConstants.STYLE_SHADOW] = 1;
		graph.getStylesheet().putCellStyle('table', style);
		
	</script>
</body>
</html>
